<template>
	<navbar title="番茄"> </navbar>
	<view class="main">
    <view class="time-wrap">
      <view class="time">{{ selectTag.time }}</view>
    </view>
    <view class="tag-wrap">
      <view class="tag">{{ selectTag.tag }}</view>
      <view class="icon-wrap">
        <image class="icon" src="/static/images/right.png"></image>
      </view>
    </view>
    <view class="start" @click="handleStart">
      <view class="text">开始</view>
    </view>
  </view>
	<view class="button"> 创建 </view>
</template>

<script setup lang="ts">
import * as dayjs from 'dayjs'
import {ref,reactive, computed} from 'vue';
const selectId = ref(1)
const mockList = ref([
    {
      tag: '阅读',
      time: '00:02:30',
      id: 1
    }
])
const utils = reactive({
  intervalId: null,
  targetDate: null
})
const selectTag = computed(() => {
  return mockList.value.find(item => item.id === selectId.value)
})
function handleStart() {
  const selectedTag = selectTag.value; // 获取计算属性的值
  if (selectedTag) { // 确保选中的项存在
   utils.targetDate = dayjs(selectedTag.time, 'HH:mm:ss')
    // utils.intervalId = setInterval(countDown, 1000);
    console.log('timeList', utils.targetDate.getTime())
  } else {
    console.log('No matching item found');
  }
}
const countDown = () => {
  const distance = utils.targetDate.getTime() - now;

  if (distance <= 0) {
    clearInterval(utils.intervalId);
  } else {
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    console.log(`${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`)
  }
};


</script>

<style lang="scss" scoped>
.main {
  padding-top: 150rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #61564a;
  .time-wrap {
    .time {
      font-family: PingFangSC-Bold;
      font-size: 188rpx;
    }
  }
  .tag-wrap {
    margin-top: 12rpx;
    display: flex;
    align-items: center;
    .tag {
      font-size: 34rpx;
      margin-right: 6rpx;
    }
    .icon-wrap {
      width: 34rpx;
      height: 32rpx;
      .icon {
        width: 34rpx;
        height: 32rpx;
      }
    }
  }

  .start {
    margin-top: 180rpx;
    width: 160rpx;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #61564a;
    border-radius: 24rpx;
    text-align: center;
    .text {
      color: #ffffff;
    }
  }
}
.button {
	position: fixed;
	left: 50rpx;
	bottom: 100rpx;
	width: 100rpx;
	height: 60rpx;
	background-color: #ffffff;
	border-radius: 12rpx;
}
</style>
